<SettingsLayout page='settings/wellness' label="{intl.wellness}">
  <h1>{intl.wellnessSettings}</h1>

  <p>
    {intl.wellnessDescription}
  </p>

  <form class="ui-settings">
    <label class="setting-group">
      <input type="checkbox" id="choice-check-all"
             on:change="onCheckAllChange(event)">
      {intl.enableAll}
    </label>
  </form>

  <h2>{intl.metrics}</h2>

  <form class="ui-settings">
    <label class="setting-group">
      <input type="checkbox" id="choice-disable-follower-counts"
             bind:checked="$disableFollowerCounts" on:change="onChange(event)">
      {intl.hideFollowerCount}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-disable-reblog-counts"
             bind:checked="$disableReblogCounts" on:change="onChange(event)">
      {intl.hideReblogCount}
    </label>
    <label class="setting-group">
      <input type="checkbox" id="choice-disable-fav-counts"
             bind:checked="$disableFavCounts" on:change="onChange(event)">
      {intl.hideFavoriteCount}
    </label>
  </form>

  <h2>{intl.immediacy}</h2>

  <form class="ui-settings">
    <label class="setting-group">
      <input type="checkbox" id="choice-disable-unread-notification-counts"
             bind:checked="$disableNotificationBadge" on:change="onChange(event)">
      {intl.hideUnread}
    </label>
    <label class="settings-group">
      <input type="checkbox" id="choice-disable-relative-timestamps"
             bind:checked="$disableRelativeTimestamps" on:change="onChange(event)">
      {intl.showAbsoluteTimestamps}
    </label>
  </form>

  <InfoAside className="wellness-aside">
    {intl.filterNotificationsPre}
    <a rel="prefetch" href="/settings/instances{$currentInstance ? '/' + $currentInstance : ''}">{intl.filterNotificationsText}</a>.
    {intl.filterNotificationsPost}
  </InfoAside>

  <h2>{intl.ui}</h2>

  <form class="ui-settings">
    <label class="setting-group">
      <input type="checkbox" id="choice-grayscale"
             bind:checked="$enableGrayscale" on:change="onChange(event)">
      {intl.grayscaleMode}
    </label>
  </form>
  <p>
    {intl.wellnessFooter}
  </p>
</SettingsLayout>
<UISettingsStyles />
<style>
  :global(.wellness-aside) {
    margin: 20px 10px 0px 10px;
  }
</style>
<script>
  import SettingsLayout from '../../_components/settings/SettingsLayout.html'
  import { store } from '../../_store/store.js'
  import InfoAside from '../../_components/InfoAside.html'
  import UISettingsStyles from '../../_components/settings/UISettingsStyles.html'

  export default {
    oncreate () {
      this.flushChangesToCheckAll()
    },
    components: {
      SettingsLayout,
      InfoAside,
      UISettingsStyles
    },
    methods: {
      flushChangesToCheckAll () {
        const {
          disableFollowerCounts,
          disableReblogCounts,
          disableFavCounts,
          disableNotificationBadge,
          disableRelativeTimestamps,
          enableGrayscale
        } = this.store.get()
        document.querySelector('#choice-check-all').checked = disableFollowerCounts &&
          disableReblogCounts &&
          disableFavCounts &&
          disableNotificationBadge &&
          disableRelativeTimestamps &&
          enableGrayscale
      },
      onCheckAllChange (e) {
        const { checked } = e.target
        this.store.set({
          disableFollowerCounts: checked,
          disableReblogCounts: checked,
          disableFavCounts: checked,
          disableNotificationBadge: checked,
          disableRelativeTimestamps: checked,
          enableGrayscale: checked
        })
        this.store.save()
      },
      onChange () {
        this.flushChangesToCheckAll()
        this.store.save()
      }
    },
    store: () => store
  }
</script>
